window.addEventListener("load", function () {
	//头部点击按钮更换激活样式
	
	//api区交互移入移出效果
	//思路
	//1.获取相关节点
	//2.给li绑定移入移出效果
	let oldUrl = ""; //提升变量,将一个空值作为原图承接
	$("#apiLis li").forEach(function (v) {
		v.addEventListener("mouseover", function () {
			//改变颜色
			this.style.backgroundColor = "#2f7ee9";
			//文字变白
			this.style.color = "#fff";
			//切换透明图片
			//将图片的后缀名进行修改加-c
			let imgUrl = this.firstElementChild.src;
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			oldUrl = imgUrl; //用变量保存原路径
		});
		//移出事件
		v.addEventListener("mouseout", function () {
			this.style.backgroundColor = "#fff";
			this.style.color = "#000";
			this.firstElementChild.src = oldUrl;
		});
	});
	//独角兽
	const unicornConts = $(".unicornCont");
	unicornConts[0].style.opacity = "1"; // 默认显示第0个
	let index = 1;
	// 2.设置周期定时器每隔3秒显示
	this.window.setInterval(function () {
		// 3.排他思想，不管当前谁显示，每一个周期都先让所有消失
		unicornConts.forEach(function (v) {
			v.style.opacity = "0";
		});
		// 4.通过索引显示对应内容，其他不显示
		unicornConts[index].style.opacity = "1";
		// 5.设置索引变量，每隔一个周期就++
		index++;
		// 6.当索引达到最大限度时要回复初始状态
		if (index > unicornConts.length - 1) {
			index = 0;
		}
	}, 3000);

	//回到顶部窗口事件
	let btnNode = $("#btn");
	this.window.addEventListener("scroll", function () {
		
		if (window.scrollY >= 1200) {
			btnNode.style.transition = "opacity 1s";
			btnNode.style.opacity = 1;
		} else {
			btnNode.style.opacity = 0;
		}
		btnNode.addEventListener("click", function () {
			window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
		});
	});


	// 轮播图效果部分
	var swiper = new Swiper(".mySwiper", {
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
			renderBullet: function (index, className) {
				return '<span class="' + className + '">' + (index + 1) + "</span>";
			},
		},
	});
	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //等同于以下设置
		/*autoplay: {
		  delay: 3000,
		  stopOnLastSlide: false,
		  disableOnInteraction: true,
		  },*/
	});
});
